<template>
	<block>
		<hxt-layout id="hxt-layout" title="机油列表" svc="engineOil" initTitle="机油列表加载失败" @initPage="initPage">
			<view class="hxt-flex-column" style="background-color: #fff;">
				<!-- <van-dropdown-menu active-color="#1989fa">
					<van-dropdown-item :value="idx" :options="urlList" @change="change"></van-dropdown-item>
				</van-dropdown-menu> -->
				<van-dropdown-menu active-color="#1989fa">
					<van-dropdown-item :value="query.bId" :options="modelList" @change="bIdChange"
						popup-style="max-height: 50vh;"></van-dropdown-item>
					<van-dropdown-item :value="query.eoApplications" :options="applications"
						@change="eoApplicationsChange" popup-style="max-height: 50vh;"></van-dropdown-item>
				</van-dropdown-menu>
				<view class="hxt-flex-fill" style="overflow: hidden;">
					<hxt-scroll ref="scrollEL" id="scrollEL" scroll-y style="height:100%;" scroll-with-animation="true"
						enable-back-to-top="true" :enhanced="true" :bounces="false" @loadData="loadData">
						<view v-for="(item,index) in list" :key="index" style="margin: 20rpx;">
							<van-swipe-cell :right-width="65" async-close @close="onClose($event,item.eoId,index)">
								<van-cell-group>
									<van-card :tag="index+1" thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
										:origin-price="item.eoOldProce" :price="item.eoPrice" :num="item.eoStock">
										<view slot="title" style="font-size: 30rpx;font-weight: 700;">
											{{item.eoBrand}}
										</view>
										<view slot="desc">
											型号：{{item.eoModel}}

										</view>
										<view slot="tags">
											容量：{{item.eoCapacity}}L

										</view>
										<view slot="price-top">
											适用车型：{{item.eoApplications}}
											<!-- 时间：{{item.eoTime}} -->
										</view>
									</van-card>
								</van-cell-group>
								<view slot="right" style="height: 100%;" class="van-swipe-cell__right">
									<button class="cu-btn bg-red" style="height: 100%;">删除</button>
								</view>
							</van-swipe-cell>
						</view>
					</hxt-scroll>
				</view>
			</view>
			<movable-area
				style="position: absolute;top: 10%;right: 150rpx;width: 80%;height: 70%;pointer-events: none;">
				<movable-view :x="x" :y="y" class="hxt-maview" direction="all">
					<view class="cu-tag round bg-blue padding shadow-blur" @click="AddCar">新增机油</view>
				</movable-view>
			</movable-area>
			<page-container v-if="showAdd" :show="showAdd" position="center" @clickoverlay="closeAdd"
				@afterleave="closeAdd">
				<view class="hxt-flex-column">
					<view class="hxt-flex-fill" style="height: 1px;">
						<scroll-view scroll-y style="height:100%;background-color: #F5F5F5;" enable-back-to-top="true"
							:enhanced="true" :bounces="false">
							<view style="padding: 1rpx 0;">
								<view
									style="background-color: #FFFFFF;padding: 30rpx;margin: 20rpx;border-radius: 15rpx;">
									<view class="padding-bottom">
										<text class="text-red">*</text>
										<text style="font-weight: bold;">机油品牌</text>
										<!-- <text v-if="!!item.gkMark">（{{item.gkMark}}）</text> -->
									</view>
									<view class="inputborder">
										<hxt-input :border="false" v-model="form.eoBrand" placeholder="请输入机油品牌">
										</hxt-input>
									</view>
								</view>
								<view
									style="background-color: #FFFFFF;padding: 30rpx;margin: 20rpx;border-radius: 15rpx;">
									<view class="padding-bottom">
										<text class="text-red">*</text>
										<text style="font-weight: bold;">机油型号</text>
										<!-- <text v-if="!!item.gkMark">（{{item.gkMark}}）</text> -->
									</view>
									<view class="inputborder">
										<hxt-input :border="false" v-model="form.eoModel" placeholder="请输入机油型号">
										</hxt-input>
									</view>
								</view>
								<view
									style="background-color: #FFFFFF;padding: 30rpx;margin: 20rpx;border-radius: 15rpx;">
									<view class="padding-bottom">
										<text class="text-red">*</text>
										<text style="font-weight: bold;">适用车型</text>
										<!-- <text v-if="!!item.gkMark">（{{item.gkMark}}）</text> -->
									</view>
									<view class="inputborder">
										<hxt-input :border="false" v-model="form.eoApplications" placeholder="请输入适用车型">
										</hxt-input>
									</view>
								</view>
								<view
									style="background-color: #FFFFFF;padding: 30rpx;margin: 20rpx;border-radius: 15rpx;">
									<view class="padding-bottom">
										<text class="text-red">*</text>
										<text style="font-weight: bold;">容量</text>
										<!-- <text v-if="!!item.gkMark">（{{item.gkMark}}）</text> -->
									</view>
									<view class="inputborder">
										<hxt-input type="digit" :border="false" v-model="form.eoCapacity"
											placeholder="请输入容量">
										</hxt-input>
									</view>
								</view>
								<view
									style="background-color: #FFFFFF;padding: 30rpx;margin: 20rpx;border-radius: 15rpx;">
									<view class="padding-bottom">
										<text class="text-red">*</text>
										<text style="font-weight: bold;">底价</text>
										<!-- <text v-if="!!item.gkMark">（{{item.gkMark}}）</text> -->
									</view>
									<view class="inputborder">
										<hxt-input type="digit" :border="false" v-model="form.eoOldProce"
											placeholder="请输入底价">
										</hxt-input>
									</view>
								</view>
								<view
									style="background-color: #FFFFFF;padding: 30rpx;margin: 20rpx;border-radius: 15rpx;">
									<view class="padding-bottom">
										<text class="text-red">*</text>
										<text style="font-weight: bold;">售价</text>
										<!-- <text v-if="!!item.gkMark">（{{item.gkMark}}）</text> -->
									</view>
									<view class="inputborder">
										<hxt-input type="digit" :border="false" v-model="form.eoPrice"
											placeholder="请输入售价">
										</hxt-input>
									</view>
								</view>
								<view
									style="background-color: #FFFFFF;padding: 30rpx;margin: 20rpx;border-radius: 15rpx;">
									<view class="padding-bottom">
										<text class="text-red">*</text>
										<text style="font-weight: bold;">库存数量</text>
										<!-- <text v-if="!!item.gkMark">（{{item.gkMark}}）</text> -->
									</view>
									<view class="inputborder">
										<hxt-input type="number" :border="false" v-model="form.eoStock"
											placeholder="请输入库存数量">
										</hxt-input>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
					<view class="hxt-flex" style="padding: 20rpx;">
						<button class="cu-btn round bg-cyan shadow" @click="submit"
							style="background-color: #1cbbb4;width: 100%;">保存</button>
					</view>
				</view>
			</page-container>
		</hxt-layout>
		<hxt-loading id="hxt-loading"></hxt-loading>
	</block>
</template>

<script>
	import hxt from "@/utils/hxt.js"
	export default {
		data() {
			const app = getApp();
			return {
				list: [],
				showAdd: false,
				oldform: null,
				query: {
					bId: 0,
					eoApplications: '',
					pageIndex: 0,
					pageSize: 20,
				},
				currentUser: app.globalData.currentUser,
				applications: [{
					text: '全部',
					value: ''
				}],
				modelList: [{
					text: '全部',
					value: 0
				}],
				form: {
					optType: 0,
					eoId: 0,
					eoBrand: '',
					eoModel: '',
					eoApplications: '',
					eoCapacity: '',
					eoPrice: '',
					eoOldProce: '',
					eoStock: '',
					eoImg: '',
					openId: app.globalData.currentUser.openId,
					state:'engineOil'
				},
			}
		},
		onShow: function(e) {},
		methods: {
			initPage: function(e) { //初始化事件
				var _this = this;
				_this.loadModel();
				_this.loadData();
			},
			loadModel: function(e) {
				var _this = this;
				var applications = [{
					text: '全部',
					value: ''
				}];
				var modelList = [{
					text: '全部',
					value: 0
				}];
				console.log(_this.applications)
				hxt.post({
					url: hxt.domain + "pc/eoModelList",
					data: {},
					ok: function(res) {
						if (res.data.code != 0) {
							hxt.alert(res.data.errmsg, '获取机油品牌列表失败');
							return;
						};
						_this.modelList = modelList.concat(res.data.data);
					},
					fail: function(res) {
						hxt.alert(res.errMsg, '获取机油品牌列表失败');
					}
				});
				hxt.post({
					url: hxt.domain + "pc/getCars",
					data: {},
					ok: function(res) {
						if (res.data.code != 0) {
							hxt.alert(res.data.errmsg, '获取车型列表失败');
							return;
						};
						var map = res.data.data.map(function(it) {
							return {
								text: it.cName,
								value: it.cName
							}
						})
						_this.applications = applications.concat(map);
					},
					fail: function(res) {
						hxt.alert(res.errMsg, '获取车型列表失败');
					}
				});

			},
			loadData: function(e) {
				var _this = this;
				if (!e || e.refresh) {
					_this.query.pageIndex = 1;
				};
				hxt.post({
					url: hxt.domain + 'pc/engineOilList',
					data: _this.query,
					ok: function(res) {
						if (res.data.code != 0) {
							hxt.Notify({
								type: 'danger',
								message: '加载失败：' + res.data.errmsg + '，请稍后重试！'
							});
							_this.$refs.scrollEL.refreshDone(_this.query.pageIndex != 1);
							_this.list = [];
							return;
						};
						var list = _this.query.pageIndex == 1 ? [] : _this.list;
						for (var i = 0; i < res.data.data.list.length; i++) {
							list.push(res.data.data.list[i]);
						};
						_this.list = list;
						_this.query.pageIndex = res.data.data.pageIndex + 1;
						_this.query.pageSize = res.data.data.pageSize;
						_this.$refs.scrollEL.refreshDone(_this.query.pageIndex <= Math.ceil(res.data.data
							.rowCount / res.data.data.pageSize));
					},
					fail: function(res) {
						hxt.Notify({
							type: 'danger',
							message: '加载失败：' + res.errMsg + '，请稍后重试！'
						});
						_this.$refs.scrollEL.refreshDone(_this.query.pageIndex != 1);
						_this.list = [];
					}
				});
			},
			bIdChange: function(e) {
				var _this = this;
				_this.query.bId = e.detail;
				_this.loadData();
			},
			eoApplicationsChange: function(e) {
				var _this = this;
				_this.query.eoApplications = e.detail;
				_this.loadData();
			},
			AddCar: function(e) {
				var _this = this;
				_this.showAdd = true;
				_this.form.optType = 0;
			},
			closeAdd: function(e) {
				var _this = this;
				_this.form.optType = 0;
				_this.form.eoId = 0;
				_this.form.eoBrand = '';
				_this.form.eoModel = '';
				_this.form.eoApplications = '';
				_this.form.eoCapacity = '';
				_this.form.eoPrice = '';
				_this.form.eoOldProce = '';
				_this.form.eoStock = '';
				_this.form.eoImg = '';
				_this.oldform = '';
				_this.showAdd = false;
			},
			submit: function(e) {
				var _this = this,
					form = _this.form;
				if (_this.oldform == JSON.stringify(_this.form)) return hxt.Notify({
					type: 'warning',
					message: '提交失败：资料未更改'
				});
				if (!hxt.trim(form.eoBrand)) return hxt.Notify({
					type: 'danger',
					message: '提交失败：请输入机油品牌'
				});
				if (!hxt.trim(form.eoModel)) return hxt.Notify({
					type: 'danger',
					message: '提交失败：请输入机油型号'
				});
				if (!hxt.trim(form.eoApplications)) return hxt.Notify({
					type: 'danger',
					message: '提交失败：请输入适用车型'
				});
				if (!hxt.trim(form.eoCapacity)) return hxt.Notify({
					type: 'danger',
					message: '提交失败：请输入容量'
				});
				if (!hxt.trim(form.eoOldProce)) return hxt.Notify({
					type: 'danger',
					message: '提交失败：请输入底价'
				});
				if (!hxt.trim(form.eoPrice)) return hxt.Notify({
					type: 'danger',
					message: '提交失败：请输入售价'
				});
				if (!hxt.trim(form.eoStock)) return hxt.Notify({
					type: 'danger',
					message: '提交失败：请输入库存数量'
				});
				form.openId=_this.currentUser.openId;
				hxt.confirm("确定添加？", "", function() {
					hxt.post({
						url: hxt.domain + "pc/engineOilAdd",
						data: form,
						ok: function(res) {
							if (res.data.code != 0) {
								hxt.Notify({
									type: 'danger',
									message: '操作失败：' + res.data.errmsg
								});
								return;
							};
							hxt.Notify({
								type: 'success',
								message: '操作成功',
								duration: 1000
							});
							_this.loadModel();
							_this.loadData();
							_this.closeAdd();
						},
						fail: function(res) {
							hxt.Notify({
								type: 'danger',
								message: '操作失败：' + res.errMsg
							});
						}
					});
				});
			},
			onClose: function(e, eoId, index) {
				var _this = this,
					{
						position,
						instance
					} = e.detail;
				hxt.confirm("注意：删除后不能找回", "确定删除吗?", function() {
					hxt.post({
						url: hxt.domain + "pc/engineOilAdd",
						data: {
							optType: 2,
							eoId: eoId,
							openId:_this.currentUser.openId,
							state:_this.form.state
						},
						ok: function(res) {
							if (res.data.code != 0) {
								hxt.Notify({
									type: 'danger',
									message: '删除失败：' + res.data.errmsg
								});
								return;
							};
							hxt.Notify({
								type: 'success',
								message: '删除成功',
								duration: 1000
							});
							_this.list.splice(index, 1);
						},
						fail: function(res) {
							hxt.Notify({
								type: 'danger',
								message: '删除失败：' + res.errMsg
							});
						}
					});
					instance.close();
				}, function() {
					instance.close();
				});
			}
		}
	}
</script>

<style>
	.inputborder {
		border: 2rpx solid #e5e5e5;
		border-radius: 8rpx;
		background-color: #fff;
		padding: 1rpx 10rpx;
	}

	.van-cell {
		padding: 10rpx !important;
	}

	.txt-css {
		word-break: break-all;
		word-wrap: break-word;
		white-space: pre-line;
	}
</style>
